<template>
	<el-aside width="180px" class="aside" ref="asideRef">
		<!-- <el-image class="headImg" ref="headImgRef" src="/static/img/logo.jpg" fit="contain"></el-image> -->
		<el-menu
			:collapse="fold"
			ref="menuRef"
			class="menu sele_none"
			@select="seleMenu"
			:default-active="onRoutes"
			background-color="#fff"
			text-color="#000"
			active-text-color="#ff6a6c"
			unique-opened
		>
			<template v-for="item in items">
				<template v-if="item.subs && item.subs.length > 0">
					<el-submenu :index="item.url" :key="item.index" :show-timeout="500" :hide-timeout="500">
						<template slot="title">
							<i class="icon margin_r_20" :class="item.icon"></i>
							<span slot="title">{{ item.title }}</span>
						</template>
						<template v-for="subItem in item.subs">
							<el-menu-item :index="subItem.url" :key="subItem.index">{{ subItem.title }}</el-menu-item>
						</template>
					</el-submenu>
				</template>
				<template v-else>
					<el-menu-item :index="item.url" :key="item.index">
						<i class="icon margin_r_20" :class="item.icon"></i>
						<span slot="title">{{ item.title }}</span>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</el-aside>
</template>

<script>
export default {
	data() {
		return {
			fold: false,
			items: [],
			menu: {},
			menuDatas: []
		};
	},
	methods: {
		getSubs(params) {
			let arr = this.menuDatas.filter(x => x.parent_id == params._id);
			let subs = [];
			arr.forEach(data => {
				subs.push({
					index: 'sub_' + data._id,
					url: data.url || 'sub_' + data._id,
					title: data.name
				});
			});

			return subs;
		},
		getMenu() {
			this.items = [];
			this.menuDatas = uni.getStorageSync("__menu") || [];
			
			this.menuDatas.forEach(data => {
				if (data.parent_id == '')
					this.items.push({
						icon: data.icon,
						url: data.url || data._id + '',
						index: data._id + '',
						title: data.name,
						subs: this.getSubs(data)
					});
			});
		},
		seleMenu(path) {
			uni.redirectTo({
				url: path
			})
			this.closeMenu();
		},
		closeMenu() {
			if (this.menu && this.menu.parent_id === '') {
				this.$refs.menuRef.close(this.$refs.menuRef.openedMenus[0]);
			}
		}
	},
	created() {
		uni.$on('fold', res => {
			this.fold = res;
			if (res) {
				document.getElementsByTagName('uni-left-window')[0].style.width = 'var(--window-left)';
				this.$refs.asideRef.$el.style.width = 'var(--window-left)';
				this.$refs.headImgRef.$el.style.width = 'var(--window-left)';
				this.$refs.headImgRef.$el.style.height = '100px';
			} else {
				document.getElementsByTagName('uni-left-window')[0].style.width = 'var(--window-left)';
				this.$refs.asideRef.$el.style.width = 'var(--window-left)';
				this.$refs.headImgRef.$el.style.width = '100%';
				this.$refs.headImgRef.$el.style.height = '100px';
			}
		});

		this.getMenu();
		
		uni.$on('loginIn', () => {
			this.getMenu();
		});
		
		uni.$on('loginOut', () => {
			this.closeMenu();
			uni.removeStorageSync("__menu");
			uni.removeStorageSync("__menu_first");
		});
		
		uni.$on('routeChange', (route) => {
			const path = route.path == '/' ? '/pages/home' : route.path;
			this.menu = this.menuDatas.find(x => x.url == path);
			
			this.closeMenu();
		});
	},
	computed: {
		onRoutes() {
			return this.$route.path == '/' ? '/pages/home' : this.$route.path;
		}
	}
};
</script>

<style>
>>> .el-menu {
	border: none;
}

>>> .el-submenu__title:hover,
>>> .el-menu-item:hover,
>>> .el-submenu__title:hover i {
	color: #ff6a6c !important;
	background-color: #fff !important;
}

>>> .el-submenu__icon-arrow {
	transform: rotate(-90deg);
	top: 31px;
	right: 20px;
}

>>> .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
	transform: rotate(0deg);
}

>>> .el-submenu .el-menu-item {
	padding: 0 0 0 68px !important;
	min-width: initial !important;
}

>>> .el-menu-item i {
	color: #909399;
}

>>> .el-menu-item.is-active:after {
	content: ' ';
	position: absolute;
	right: 0rem;
	width: 0.3125rem;
	height: 1.25rem;
	background-color: #ff6a6c;
	top: 50%;
	transform: translate(0, -50%);
}

>>> .el-menu-item:hover .icon,
>>> .el-submenu:hover .icon {
	font-size: 24px;
	color: #FF6a6c;
}

.aside {
	height: 100%;
	background-color: #ffffff;
	overflow-x: hidden;
	overflow-y: hidden;
	transition: all 0.35s;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.headImg {
	width: 100%;
	height: 100px;
	transition: all 0.35s;
}

.el-image:hover {
	transform: scale(1);
}

.menu {
	overflow: overlay;
	height: calc(100% - 100px);
	overflow-x: hidden;
}

.menu::-webkit-scrollbar {
    display: none;
}

.main::-webkit-scrollbar {
	display: none;
}

.icon {
	font-size: 20px;
	transition: font-size 0.2s;
}
</style>
